<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ name: 'dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>运营管理</el-breadcrumb-item>
				<el-breadcrumb-item>{{infoForm.id ? '编辑轮播' : '添加轮播'}}</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="operation-nav">
				<el-button type="primary" @click="goBackPage" icon="arrow-left">返回列表</el-button>
			</div>
		</div>
		<div class="content-main">
			<div class="form-table-box">
				<el-form ref="infoForm" :rules="infoRules" :model="infoForm" label-width="120px">
					<el-form-item label="图片名称" prop="bannerName">
						<el-input v-model="infoForm.bannerName"></el-input>
					</el-form-item>
					<el-form-item label="缩略图" prop="bannerImage">
						<div class="pos-r" v-if="infoForm.bannerImage"  >
							<div class="pos-r" style="width:187px;">
								<img  :src="infoForm.bannerImage" class="image-show pos-r" />
								<i class="el-icon-error pos-a delBtn" @click="handleRemove"></i>
							</div>
							<div slot="tip" class="el-upload__tip">{{uploadingImgStatus?'压缩中...请稍等':'建议上传尺寸750*372,大小不超过2M'}}</div>
						</div>
						<el-upload class="image-uploader" name="upfile" :action="imgServer" :on-success="handleUploadImageSuccess" :limit="1"
						 :on-progress="uploadingImgAction" :on-remove="handleRemove" :before-upload="beforeUpload" v-else >
							<i class="el-icon-plus image-uploader-icon"></i>
							<div slot="tip" class="el-upload__tip">{{uploadingImgStatus?'压缩中...请稍等':'建议上传尺寸750*372,大小不超过2M'}}</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="跳转类型">
						<el-select v-model="infoForm.forwardType" placeholder="请选择跳转类型">
							<el-option label="视频" :value="1"></el-option>
							<el-option label="链接" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="跳转链接" v-if="infoForm.forwardType==2">
						<el-input v-model="infoForm.forwardUrl"></el-input>
					</el-form-item>
					<el-form-item label="跳转ID" v-else>
						<el-input v-model="infoForm.forwardUrl"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio-group  v-model="infoForm.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group >
					</el-form-item>
					<el-form-item label="排序">
						<el-input-number v-model="infoForm.sorting" :min="0" ></el-input-number>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmitInfo">确定保存</el-button>
						<el-button @click="goBackPage">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		addBanner
	} from '@/api/permission'
	import config from '@/config/baseUrl'
	export default {
		data() {
			return {
				imgServer: `${config.baseUrl}/vms/v1/image/upload`,
				uploadingImgStatus: false,
				infoForm: {
					bannerId: '',
					bannerName: '',
					bannerImage: '',
					forwardUrl: null,
					forwardType: 1,
					sorting: null,
					status:1
				},
				infoRules: {
					bannerName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					bannerImage: [{
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}]
				}
			}
		},
		methods: {
			uploadingImgAction(event, file, fileList) {
				let percentage = parseInt(event.loaded / event.total * 100)
				if (percentage == 100) {
					this.uploadingImgStatus = true
				}
			},
			handleRemove() {
				this.infoForm.bannerImage = ''
			},
			goBackPage() {
				this.$router.go(-1)
			},
			beforeUpload(file){
				let self = this
				if((file.size/(1024*1024))>2){
					self.$notify({
						title:'提示',
						message:'文件太大2M以内'
					})
					return false
				}
			},
			onSubmitInfo() {
				let self = this
				this.$refs['infoForm'].validate(valid => {
					if (valid) {
						addBanner(self.infoForm)
							.then(res => {
								self.$router.push({
									name: 'topic'
								})
							})
					} else {
						return false
					}
				})
			},
			handleUploadImageSuccess(res, file) {
				this.uploadingImgStatus = false
				if (res.respCode.code == 'EDI-10000') {
					this.infoForm.bannerImage = res.data.fileUrl
				} else {

				}
			}
		},
		components: {},
		created() {

		},
		mounted() {
			let self = this
			console.log(this.$route.params)
			if(this.$route.params.data){
				let data = JSON.parse(self.$route.params.data)
				for(let key in self.infoForm){
					self.infoForm[key] = data[key]
				}
			}
		}
	}
</script>

<style>
	.image-uploader {
		height: 105px;
	}

	.image-uploader .el-upload {
		border: 1px solid #d9d9d9;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.image-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 187px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader .image-show {
		width: 187px;
		height: 105px;
		display: block;
	}

	.image-uploader.new-image-uploader {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 165px;
		height: 105px;
		line-height: 105px;
		text-align: center;
	}

	.image-uploader.new-image-uploader .image-show {
		width: 165px;
		height: 105px;
		display: block;
	}

	.progressContent {
		color: #666;
		font-size: 12px;
		padding-top: 8px;
		position: relative;
		text-align: center;
	}
	.delBtn {
		position: absolute;
		font-size: 24px;
		right: -12px;
		top: -12px;
		color: #FF5D6A;
		cursor: pointer;
		z-index: 999;
	}
</style>
